<template>
	<view>
		<!-- 设置 -->
		<myHeader title="更换手机号" showBack />
		<view class="info-list-wrap">
			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 新手机号输入 -->
				<view class="input-group">
					<text class="label">新手机号</text>
					<input v-model="newPhone" type="number" maxlength="11" placeholder="请输入新手机号"
						@input="validatePhone" />
				</view>

				<!-- 验证码输入 -->
				<view class="code-group">
					<text class="label">验证码</text>
					<view class="code-inputs">
						<input v-for="(code, index) in 4" :key="index" v-model="codeValue[index]" type="number"
							maxlength="1" :focus="currentIndex === index" @input="handleCodeInput(index)"
							@blur="currentIndex = -1" />
					</view>
					<button class="code-btn" :disabled="isCounting" @tap="getVerificationCode">
						{{ isCounting ? `${countDown}s` : '获取验证码' }}
					</button>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="footer">
				<button class="submit-btn" @tap="submitForm">完成</button>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import myHeader from "@/component/header";
	import {
		sendMsgByPhone,
		updateMobile
	} from "@/api";
	import http from "@/utils/http.js";
	export default {
		components: {
			myHeader,
		},
		data() {
			return {
				newPhone: '',
				codeValue: ['', '', '', ''],
				currentIndex: -1,
				isCounting: false,
				countDown: 60,
				timer: null
			}
		},

		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 验证手机号格式
			validatePhone() {
				const phoneReg = /^1[3-9]\d{9}$/;
				return phoneReg.test(this.newPhone);
			},

			// 处理验证码输入
			handleCodeInput(index) {
				const inputVal = this.codeValue[index];

				// 输入完成后聚焦下一个输入框
				if (inputVal.length === 1 && index < 3) {
					this.currentIndex = index + 1;
				}

				// 提交前校验
				this.checkFormValid();
			},

			// 获取验证码
			async getVerificationCode() {
				if (this.isCounting) return;

				// 先校验手机号
				if (!this.validatePhone()) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				// 开始倒计时
				this.isCounting = true;
				this.timer = setInterval(() => {
					if (this.countDown <= 1) {
						clearInterval(this.timer);
						this.countDown = 60;
						this.isCounting = false;
					} else {
						this.countDown--;
					}
				}, 1000);

				// 这里调用实际验证码接口
				let res = await sendMsgByPhone({
					mobile: this.newPhone,
					scene: 2,
				});
				if (res) {
					uni.showToast({
						title: "验证码发送成功",
						icon: "success",
					});
				}
			},

			// 表单校验
			checkFormValid() {
				// 手机号校验
				const phoneValid = this.validatePhone();
				// 验证码校验
				const codeValid = this.codeValue.join('').length === 4;

				return phoneValid && codeValid;
			},

			// 提交表单
			async submitForm() {
				if (!this.checkFormValid()) {
					uni.showToast({
						title: '请完善信息',
						icon: 'none'
					});
					return;
				}

				// 组装提交数据
				const formData = {
					mobile: this.newPhone,
					code: this.codeValue.join('')
				};

				// 这里调用实际提交接口
				uni.showLoading({
					title: '提交中...'
				});

				let res = await updateMobile({
					...formData
				});
				if (res) {
					uni.hideLoading();
					uni.showToast({
						title: '更换成功',
						success: () => {
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					});
				}
			}
		},

		beforeDestroy() {
			// 清除倒计时
			if (this.timer) clearInterval(this.timer);
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #141a2e;
		height: 100%;
	}

	.info-list-wrap {
		padding: 16rpx 32rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* 导航栏 */
	.nav-header {
		position: relative;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #141a2e;

		.back-icon {
			position: absolute;
			left: 15px;
			font-size: 24px;
			color: #fff;
		}

		.title {
			color: #3a86ff;
			font-size: 18px;
			font-weight: 500;
		}
	}

	/* 表单容器 */
	.form-container {
		flex: 1;
		padding: 20px 15px;
	}

	.input-group {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;

		.label {
			display: block;
			font-size: 14px;
			color: #333;
			margin-bottom: 10px;
		}

		input {
			height: 40px;
			font-size: 16px;
		}
	}

	/* 验证码区域 */
	.code-group {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;

		.label {
			display: block;
			font-size: 14px;
			color: #333;
			margin-bottom: 15px;
		}

		.code-inputs {
			display: flex;
			justify-content: space-between;
			gap: 10px;

			input {
				width: 22%;
				height: 40px;
				text-align: center;
				font-size: 18px;
				border: 1px solid #eee;
				border-radius: 4px;

				:focus {
					border-color: #3a86ff;
					box-shadow: 0 0 5px rgba(58, 134, 255, 0.3);
				}
			}

		}

		.code-btn {
			margin-top: 15px;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			color: #333;
			background-color: transparent;
			border: none;

			&::after {
				border: none;
			}
		}
	}

	/* 底部按钮 */
	.footer {
		padding: 20px 15px 30px;
	}

	.submit-btn {
		width: 100%;
		height: 44px;
		line-height: 44px;
		border-radius: 22px;
		background: linear-gradient(to right, #3a86ff, #51aaff);
		color: #fff;
		font-size: 16px;
		font-weight: 500;

		&::after {
			border: none;
		}
	}
</style>